<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="css/mui.min.css">
		<!-- icon -->
		<link rel="stylesheet" href="footericon/iconfont.css">
		
		<style>
			* {
				touch-action: none;
			}
		</style>
        <style>
            html,
            body {
                background-color: #efeff4;
            }
        </style>
    </head>

    <body>
       
        <nav class="mui-bar mui-bar-tab">

			<a class="mui-tab-item mui-active sadwqe" href="./examples/frist_yes.html">
				<span class="mui-icon iconfont icon-zuoti"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item " href="">
				<span id="tianxia">
					<span class="mui-icon iconfont icon-lianxi_"></span>
					<span class="mui-tab-label">天下事</span> </span>
			</a>
        
			<a class="mui-tab-item sadwqe" href="./examples/myappindex.html">
				<span class="mui-icon iconfont icon-wode"></span>
				<span class="mui-tab-label">我的</span>
			</a>
        </nav>
        <script src="js/mui.min.js"></script>
		<script type="text/javascript">
			var old_back = mui.back;
			mui.back = function() {
				var btn = ["确定", "取消"];
				mui.confirm('确认退出应用？', '抽题系统', btn, function(e) {
					if (e.index == 0) {
						//执行mui封装好的窗口关闭逻辑；
						plus.runtime.quit();
					}
				});
			}
			
		
		</script>
        <script type="text/javascript" charset="utf-8">

            mui.plusReady(function(){
                var pages = ["examples/frist_yes.html", "examples/myappindex.html"];
                var arr = document.getElementsByClassName("sadwqe")
                var styles = {
                    top:"0px",
                    bottom:"50px"
                }
                var pageArr = [];
                var title=document.getElementById('title');
                var slef = plus.webview.currentWebview();
                for(var i=0; i<arr.length; i++){
                    // 有几个选项卡，需要创建几个子页面
                    var page = plus.webview.create(pages[i],pages[i],styles);
                    pageArr.push(page);
                    !function(i){
                        arr[i].addEventListener("tap",function(){
                            // 让当前页面(i)显示，不是当前页面隐藏
                            for(var j=0; j<pageArr.length; j++){
                                if(j!=i) pageArr[j].hide();
                                else pageArr[j].show();
                            }
                            // 设置标题
                            //title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
                            /* 让新创建的webview，追加合并到当前的窗口上。合并成一个窗口。
                             * 目的：将父子窗口合并成一个页面，实现同开同关的效果。 避免点击返回安监室，子页面先关闭，而父页面的头部和尾部没有关闭的BUG。
                             */
                            slef.append(pageArr[i]);
                            
                        })
                    }(i);
                }
                // 默认触发第0个选项卡的tap事件。
                mui.trigger(arr[0],"tap");
            });
			
			//天下事
			document.getElementById('tianxia').addEventListener('tap', function() {
				console.log("天下事");
				mui.openWindow({
					url: './tianxia.html', //通过URL传参
				})
			});
        </script>
    </body>

</html>